<template>
  <div>
    <div class="box-border">
      <van-empty v-if="list.finished && list.data.length < 1" :description="$t('common.noData')" />
      <van-list
        v-if="!list.finished || list.data.length > 0"
        v-model:loading="list.loading"
        :finished="list.finished"
        @load="getList"
        :immediate-check="false"
      >
        <div class="order" v-for="item in list.data" :key="item.orderNum">
          <div class="fxc m-b-10px font-size-1.4rem">
            <div>{{ item.shopName }}</div>
            <div :style="{ color: scolor(item) }">{{ orderStatus(orderStatusWithTime(item.status!, item.createTime)) }}</div>
          </div>
          <div class="m-b-10px">
            <template v-if="item.type == 10">
              <img class="preview" v-for="i in splitImg(item.snapshot!)" :key="i" :src="i" />
            </template>
            <template v-else>
              <div class="font-size-1.4rem">{{ orderType(item.type) }}</div>
            </template>
          </div>
          <div class="fxc">
            <div class="font-size-1.2rem color-#666">{{ item.createTime }}</div>
            <div class="font-size-1.6rem color-#FB553C">{{ item.payPrice }}</div>
          </div>
          <div class="text-right m-t6px">
            <van-button size="small" type="primary" @click="take(item)">{{ $t('take.order.detail') }}</van-button>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script setup lang="ts">
const { getList, list } = useList(apis.api.userOrderOrders)

const router = useRouter()
const { t } = useI18n()

function splitImg(imgs: string) {
  return (imgs || '').split(';')
}

function take(item: ApiOrders) {
  router.push('/take?num=' + item.orderNum)
}

function scolor(item: ApiOrders) {
  const s = orderStatusWithTime(item.status!, item.createTime)
  return ['#CD950C', '#3aa1a2', '#666'][s]
}

onMounted(async () => {
  list.loading = true
  getList()
})
</script>
<style lang="scss" scoped>
.fxc {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.order {
  border: 1px solid #3aa1a2;
  border-radius: 4px;
  margin: 12px;
  padding: 12px;
}
.preview {
  width: 60px;
  height: 60px;
  border: 8px;
  margin-right: 8px;
}
</style>
